<template>
    <div>
        <div class="apply">
            <div class="cardId">
                <div class="cardIdPositive" v-if="positiveURL">
                    <!-- <img class="uploadimg" :src="'/_api' + positiveURL"> -->
                    <el-image
                        fit="contain"
                        :src="'/_api' + positiveURL"
                        class="uploadimg"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
                <div class="cardIdReverse" v-if="reverseURL">
                    <!-- <img class="uploadimg" :src="'/_api' + reverseURL"> -->
                    <el-image
                        fit="contain"
                        :src="'/_api' + reverseURL"
                        class="uploadimg"
                        @load="loadImage()"
                        preview>
                        <div slot="placeholder" class="image-slot">
                            <i class="el-icon-loading"></i>
                        </div>
                        <div slot="error" class="image-slot">
                            <i class="el-icon-picture-outline"></i>
                        </div>
                    </el-image>
                </div>
            </div>
        </div>
        <com-buttom></com-buttom>
    </div>
</template>

<script>
    import comButtom from './buttom'

    export default {
        props: ['idCardImg'],
        data() {
            return {
                positiveURL: this.idCardImg[0],
                reverseURL: this.idCardImg[1]
            }
        },
        computed: {
            comButtom
        },
        mounted() {
            console.log(this.idCardImg)
            this.$nextTick(() => {
                this.$previewRefresh()
            })
        },
        methods: {
            loadImage() {
                this.$nextTick(() => {
                    this.$previewRefresh()
                })
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .apply {

        .cardId {
            margin: .4rem;

            .cardIdPositive {
                position: relative;
                overflow: hidden;
                height: 4rem;
                margin-bottom: .4rem;
                border-radius: .2rem;

                .uploadimg {
                    width: 100%;
                    height: 100%;
                }

                /deep/ .el-image-viewer__img {
                    transform: rotate(90deg) !important;
                }
            }

            .cardIdReverse {
                position: relative;
                overflow: hidden;
                height: 4rem;
                border-radius: .2rem;

                .uploadimg {
                    width: 100%;
                    height: 100%;
                }

                /deep/ .el-image-viewer__img {
                    transform: rotate(90deg) !important;
                }
            }

            /deep/ .el-upload-list__item {
                display: none;
            }
        }
    }
</style>
